import React, { useContext } from "react";
import { styled } from "styled-components";
import FooterFix from "./footer-fix";
import { useInView, animated } from '@react-spring/web'
import weixin from "@/assets/images/common/weixin.jpg"
import weixingz from "@/assets/images/common/weixin_icon.png"
import { useNavigate } from "react-router-dom"
import { AppContext } from "@/layouts/Main";
import TipsImage from "../TipsImage";
const FooterCxt = styled.div`
  background-color: #333333;
  width: 100%;
`;

function Footer() {
  const value = useContext(AppContext);
  const navigate = useNavigate()
  const { nav } = value as any;
  const [ref, inView] = useInView({ once: true })

  const goPage = (item: any) => {
    navigate(item.iconUrl, { replace: false, state: { query: item } });
  }
  return (
    <>
      <FooterCxt className="text-white bg-zinc-900 mt-40 h-60" ref={ref}>
        <div className="w-1200px mx-auto flex  items-center pt-10">
          <animated.div className={`flex flex-col justify-center ${inView ? 'animate__animated animate__flipInY' : ''}`}>
            <div className="hover:text-blue-500 text-2xl mt-2">联系我们 CONTACT US</div>
            <div className="hover:text-blue-500 text-2xl mt-2">17391900505</div>
            <div className="hover:text-blue-500 mt-2">
              服务热线（周一至周日08:00-22:00）
            </div>
            <div className="hover:text-blue-500 mt-2">公司地址： 陕西省西安市碑林区友谊东路81号泰华世纪新城B座603号</div>
          </animated.div>
          <animated.div className={`flex ml-20 mt-2 ${inView ? 'animate__animated animate__flipInY' : ''}`}>
            <div className="flex flex-wrap justify-between w-44">
              {
                nav.map((item: any, index: number) => {
                  return <div onClick={() => { goPage(item) }} className="w-max ml-5 cursor-pointer mt-4" key={index}>
                    <p className="mb-2 hover:text-blue-500">{item.name}</p>
                  </div>
                })
              }
            </div>
            <TipsImage></TipsImage>
            {/* <div className="ml-20 text-center">
              <img className="h-36 w-36" src={weixingz}></img>
              <div className="mt-1">微信公众号</div>
            </div>
            <div className="ml-20  text-center">
              <img className="h-36 w-36" src={weixin}></img>
              <div className="mt-1">微信客服号</div>
            </div> */}

          </animated.div>
        </div>
      </FooterCxt>
      <FooterFix></FooterFix>
    </>
  );
}

export default Footer;
